<template>
  <div>
    <div style="margin-bottom: 10px">
      <a-input-search placeholder="姓名搜索" enter-button @search="onSearch" />
      <br />
      <br />
      <a-button type="primary" icon="plus" @click="addorder">添加订单</a-button>
    </div>
    <a-table :columns="columns" :data-source="data" :loading="loading">
      <span slot="action">
        <a>打印</a>
        <a-divider type="vertical" />
        <a>删除</a>
        <a-divider type="vertical" />
        <a>详情</a>
      </span>
    </a-table>
    <!-- 添加列表 -->
    <a-modal
      title="添加订单"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleSubmit"
      @cancel="handleCancel"
      destroyOnClose
      width="50%"
      okText="确认"
      cancelText="取消"
    >
      <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="姓名">
          <a-input v-decorator="['name', validatorRules.name]" />
        </a-form-item>
        <a-form-item label="年龄">
          <a-input v-decorator="['age', validatorRules.age]" />
        </a-form-item>
        <a-form-item label="地址" style="position: relative">
          <a-cascader
            :fieldNames="{
              label: 'name',
              value: 'code',
              children: 'children',
            }"
            :options="areaData"
            placeholder="请选择省市区街道"
            v-decorator="['address', validatorRules.address]"
            @change="handleSelectChange"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- <a-button type="primary" @click="addor"> 数组扁平化 </a-button> -->
    <a-pagination
      v-model="current"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="pageSize"
      @showSizeChange="onShowSizeChange"
      @change="btn"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
        <span v-if="props.value === '50'">全部</span>
      </template>
    </a-pagination>
  </div>
</template>

<script>
import province from "@/assets/pcas-code.json";
import { Login, postAction } from "@/api/index";
export default {
  data() {
    return {
      pageSizeOptions: ["10", "20", "30", "40", "50"],
      current: 1,
      pageSize: 10,
      total: 50,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      columns: [
        {
          title: "名字",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "年龄",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "地址",
          dataIndex: "address",
          key: "address",
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      data: [],
      loading: false,
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        name: {
          rules: [{ required: true, message: "请输入姓名!" }],
        },
        age: {
          rules: [{ required: true, message: "请输入年龄!" }],
        },
        address: {
          rules: [{ required: true, message: "请输入地址!" }],
        },
      },
      areaData: province, //全国省市区数据
      address: "",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
       console.log(current,pageSize,1111);
    },
    btn(current, pageSize) {
      console.log(current,pageSize,2222);
    },
    getData() {
      this.loading = true;
      Login("/shopping/list")
        .then((res) => {
          if (res.data) {
            this.data = res.data;
          } else {
            this.$message.warning("获取数据失败");
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    addorder() {
      this.visible = true;
    },
    handleCancel(e) {
      this.visible = false;
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;

          setTimeout(() => {
            this.visible = false;
            this.confirmLoading = false;
          }, 500);
        }
      });
    },
    handleSelectChange(value) {
      // this.$nextTick(() => {
      //   this.form.setFieldsValue({
      //     address: `Hi, ${value === "male" ? "man" : "lady"}!`,
      //   });
      // });
    },
    onSearch() {
      console.log("100");
    },
    addor() {
      let arr = [
        { id: 1, name: "部门1", pid: 0 },
        { id: 2, name: "部门2", pid: 1 },
        { id: 3, name: "部门3", pid: 1 },
        { id: 4, name: "部门4", pid: 3 },
        { id: 5, name: "部门5", pid: 4 },
      ];

      let arr1 = [
        {
          id: 1,
          name: "部门1",
          pid: 0,
          children: [
            {
              id: 2,
              name: "部门2",
              pid: 1,
              children: [],
            },
            {
              id: 3,
              name: "部门3",
              pid: 1,
              children: [
                // 结果 ,,,
              ],
            },
          ],
        },
      ];

      let result = [];
      let newdata = {};
      for (var k of arr) {
        const element = k;
        if (!newdata[id]) {
          newdata[id] = {
            children: [],
          };
        }
        const treeItem = newdata[id];

        if (element.pid === 0) {
          result.push(treeItem);
        } else {
          if (!newdata[pid]) {
            newdata[pid] = {
              children: [],
            };
          }
          newdata[pid].children.push(treeItem);
        }
      }

      // return result;

      console.log(result);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
